layui.use(['element','layer','form','jquery','table'], function(){
  var layer = layui.layer
  ,element = layui.element
  ,form = layui.form
  ,$ = layui.jquery
  ,table = layui.table;


  //数据表格
    table.render({
    elem: '#data_table'
    ,height: 315
    ,id: 'testReload'
    ,url: '/index/operation/operation_json' //数据接口
    ,page:1
    ,limit:6
    ,limits:[6,12]
    ,cols: [[ //表头
      {field: 'stuId', title: 'ID', align: 'center', sort: true, fixed: 'left',width:100}
      ,{field: 'stuName', title: '姓名', align: 'center',width:150,edit: 'text'}
      ,{field: 'gender', title: '性别', sort: true, align: 'center',width:140,templet:'#gender',edit: 'text'}
      ,{field: 'age', title: '年龄', sort: true, align: 'center',width:140,edit: 'text'}
      ,{field: 'height', title: '身高(cm)', sort: true, align: 'center',width:150,edit: 'text'}
      ,{field: 'weight', title: '体重(kg)', sort: true, align: 'center',width:133,edit: 'text'}
      ,{ title: '操作',fixed: 'right', align: 'center',toolbar:'#data_operation',width:130}
    ]]
  });

    //搜索ID

    var reloadActive = {
    	reload:function () {
    		var demoReload = $('#demoReload').val();
	   		if (demoReload =='') {
	   			table.reload('testReload',{
	   				url:'/index/operation/operation_json',
	   				where:{
	   					page:1,
	   					limit:6
	   				}
	   			});
	   		}else{
	    		table.reload('testReload',{
	    			url:'/index/operation/search_stuId',
	    			where:{
	    				stuId : demoReload
	    			},
	    			page:{
	    				curr:1
	    			}
	    		});
	   		}
    	}
    }

   	$('#search').click(function () {
   		var type = $(this).data('type');
   		reloadActive[type] ? reloadActive[type].call(this) : '';

   	});


   	/*删除*/
   	table.on('tool(stu)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的DOM对象
	 
	  if(layEvent === 'del'){ //删除
	    layer.confirm('真的删除行么', function(index){
	      layer.close(index);
	      //向服务端发送删除指令
	      var stuId = data.stuId;
	      $.ajax({
	      	url:'/index/operation/del_stu',
	      	type:'post',
	      	data:{'stuId':stuId},
	      	success:function (result) {
	      		var arr_data = eval('('+result+')');
	      		layer.msg('删除'+arr_data.msg, {
				  icon: arr_data.icon,
				  time: 2000 
				});
				table.reload('testReload', {
				  url: '/index/operation/operation_json'
				});
	      	}
	      });
	    });
	  };
	});

   	/*修改*/
	  table.on('edit(stu)', function(obj){
	    var value = obj.value //得到修改后的值
	    ,data = obj.data //得到所在行所有键值
	    ,field = obj.field; //得到字段
	    var stuId = data.stuId;
	    $.ajax({
	    	url:'/index/operation/updata_stu',
	    	type:'post',
	    	data:{'stuId':stuId,'field':field,'value':value},
	    	success:function (result) {
	    		var arr_data = eval('('+result+')');
	      		layer.msg('修改'+arr_data.msg, {
				  icon: arr_data.icon,
				  time: 2000 
				});
	    	}
	    });
	  });


	  /*添加一行数据（js）*/
	  $('#add_to').click(function () {
	  	var tbody_tr = $('form tbody');
	  	var tr_td = '<tr>';
	  	tr_td += '<td><input type="text" name="stuName[]" required lay-verify="name" placeholder="请输入姓名" class="layui-input"></td>';
	  	tr_td += '<td><select name="gender[]"><option value="男" selected>男</option><option value="女">女</option></select></td>';
	  	tr_td += '<td><select name="age[]" lay-verify="age" lay-filter="age"><option value="">请选择年龄</option> <option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="21">21</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option></select> </td>';
	  	tr_td += '<td><input type="text" name="height[]" lay-verify="height" placeholder="请输入身高" class="layui-input"></td>';
	  	tr_td += '<td><input type="text" name="weight[]" lay-verify="weight" placeholder="请输入体重" class="layui-input"></td>';
	  	tr_td += '<td><a class="layui-btn layui-btn-warm layui-btn-small"><i class="layui-icon">&#xe640;</i></a></td>';
	  	tbody_tr.append(tr_td);
	  	form.render();

	  	$('.layui-btn-warm').each(function (i) {
	  		$(this).click(function () {
	  			$(this).parents('tr').remove();
	  		});
	  	});

	  });




	    //自定义验证规则
		  form.verify({
		    name: function(value){
		      if(value.length < 1){
		        return '请输入姓名！';
		      }
		    },
		    age:function (value) {
		      if (value.length < 1) {
		      	return '请选择年龄';
		      }
		    },
		    height:function (value) {
		    	if (value.length < 1) {
		    		return '请输入身高';
		    	}
		    },
		    weight:function (value) {
		    	if (value.length < 1) {
		    		return '请输入体重';
		    	}
		    }
		  });

  });